<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: LMJ
 * @Date: 2021-09-07 15:05:21
 * @LastEditors: LMJ
 * @LastEditTime: 2021-09-17 13:16:38
-->
<template>
  <div style="width: 100%; height: 100%">
    <div id="rightPie" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/legend");
require("echarts/lib/chart/pie");
var charts = {};
export default {
  data() {
    return {
      charts: {}, //可视化图表
    };
  },
  created() {},
  mounted() {
    this.init();
    //根据浏览器宽度变化改变可视化报表图宽高
    window.addEventListener("resize", () => {
      charts.resize();
    });
  },
  methods: {
    init() {
      charts = echarts.init(document.getElementById("rightPie"));
      charts.setOption({
        title: {
          text: "1月消耗统计",
          left: "right",
          textStyle: {
            color: "#06f1ef",
            fontSize: "14px",
          },
        },
        legend: {
          orient: "vertical",
          right: "1%",
          bottom: "1%",
          textStyle: {
            color: "white",
          },
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: ["0%", "95%"],
            center: ["29%", "center"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            label: {
              show: true,
              position: "inside",
              formatter: "{c}\n{d}%",
              align: "center",
              color: "#06f1ef",
              fontWeight: "bold",
              fontSize: "12px",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderColor: "#ffffff",
              borderWidth: 1,
            },
            data: [
              { value: 1048, name: "水量消耗" },
              { value: 735, name: "电量消耗" },
              { value: 546, name: "氢气消耗" },
            ],
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
</style>
